<template>
  <div>
    <mt-header class="plain" fixed>
      <mt-button slot="left" icon="back" @click="goBack">返回</mt-button>
      <mt-button slot="right" @click="goBack">取消</mt-button>
    </mt-header>

    <div class="info-container">
      <div class="my-class">
        <div class="class-title color-gray">我的课程</div>
        <div class="class-cover">
          <img :src="info.coverurl">
        </div>
        <div class="class-desc text-left">
          <div class="desc-title">{{info.title}}</div>
          <div class="desc-content color-dark-gray text-justify">
            <!-- <div class="clamp-text" @click="toggleCollapse">{{info.content}}</div> -->
            <div :class="{'display-hide': !!courseDisplayInfo['1']}" v-clampy="3" @click="handleDisplay(courseDisplayInfo, '1')" v-if="!!info.content">{{info.content}}</div>
            <div :class="{'display-hide': !courseDisplayInfo['1']}" @click="handleDisplay(courseDisplayInfo, '1')">{{info.content}}</div>
          </div>
        </div>
        <div class="class-remark text-left">
          <span class="text" v-show="info.teacher">主讲人: {{info.teacher}}</span>
          <span class="text" v-show="info.duration">{{info.duration}}课时</span>
          <!-- <span class="text color-orange" v-show="info.begintime">开课时间: {{info.begintime | dateformat('YYYY-MM-DD')}}</span> -->
        </div>
      </div>

      <div class="progress">
        <mt-progress ref="progressBar" :value="progress > 100 ? 100 : progress" :bar-height="25" class="color-orange border-radius-6">
        </mt-progress>
        <div class="remark text-center color-gray" v-if="false">
          学习进度{{progress}}%， {{progress >= 80 ? '' : '不'}}可以参加考试
        </div>
      </div>

      <div class="notice text-left">
        <div class="title color-red">注意事项：</div>
        <div class="content color-dark-gray">
          <div v-html="examInfo.content"></div>
        </div>
      </div>

      <div class="button-group">
        <div class="x-row">
          <div class="x-col-6 pr-4">
            <mt-button @click="simulate" type="primary" class="bg-orange">模拟练习</mt-button>
          </div>
          <div class="x-col-6 pl-4">
            <mt-button @click="test" type="primary" class="bg-light-blue">在线考试 ({{examInfo.retrytime || 0}}/3)</mt-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>

import examApi from '@/api/exam'
import { Toast } from 'mint-ui'
import { Const } from '@/consts'

export default {
  data () {
    return {
      info: {},
      examInfo: {},
      progress: 0,
      courseId: '',

      buttonEnabled: {
        simulate: true,
        test: true
      },

      courseDisplayInfo: {
        '1': false
      }
    }
  },

  created () {
    this.getQueryParams();
    this.getCourseInfo();
    this.getExamInfo();
  },

  mounted () {
    // this.refreshProgress()
  },

  methods: {

    goBack () {
      let from = this.$route.query.from || ''

      if (from) {
        this.$router.push('/' + from.replace(/-/g, '/'))
      } else {
        this.$router.push({
          path: '/index/courseInfo',
          query: {
            courseid: this.courseId
          }
        });
      }

    },

    refreshProgress () {
      let progress = this.$refs.progressBar.$el.querySelector('.mt-progress-progress');
      if (progress) {
        progress.innerHTML = '<div class="progress-text">' + this.progress + '%' + '</div>'
      }
    },

    getQueryParams () {
      const courseId = this.$route.query && this.$route.query.courseId || '';

      if (!courseId) {
        Toast('出错了 ...');
        return;
      }

      this.courseId = courseId;
    },

    check () {
      if (!this.progress || this.progress < 100) {
        Toast('未达学习进度，请完成全部课时学习后再进行考试');
        return false
      }

      if (!this.examInfo || Object.keys(this.examInfo).length == 0) {
        Toast('考试信息获取失败');
        return false
      }

      return true
    },

    simulate () {
      //this.$router.push('/exam');
      const courseId = this.courseId;

      if (!courseId || !this.check()) {
        return;
      }



      if (this.buttonEnabled.simulate) {
        this.buttonEnabled.simulate = false;
      } else {
        return;
      }

      this.$router.push({
        path: '/exam',
        query: {
          courseId: courseId,
          examType: '0'
        }
      })

      // examApi.startExam({
      //     params: {
      //         courseid: courseId,
      //         examtype: 'SIMULATION'
      //     }
      // }).then((resp) => {
      //     const result = resp[Const.RESP_RESULT];
      //     if (result === true || (result && result[Const.RESP_RESULT] === true)) {
      //         this.$router.push({path: '/exam', query: {
      //             courseId: courseId,
      //             examType: '0'
      //         }});
      //     } else {
      //         Toast('很抱歉，您暂时不能进行考试');
      //     }
      // }).catch((resp) => {
      //     // Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
      //     this.buttonEnabled.simulate = true;
      //     if (resp.statusCode == '200') {
      //         Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
      //     }

      // });
    },

    test () {

      const courseId = this.courseId;

      if (!courseId || !this.check()) {
        return;
      }

      this.$router.push({ path: '/exam/idverify', query: { courseId: courseId } })

      // if (this.buttonEnabled.test) {
      //     this.buttonEnabled.test = false;
      // } else {
      //     return;
      // }

      // examApi.startExam({
      //     params: {
      //         courseid: courseId,
      //         examtype: 'REAL'
      //     }
      // }).then((resp) => {
      //     const result = resp[Const.RESP_RESULT];
      //     if (result === true || (result && result[Const.RESP_RESULT] === true)) {
      //         this.$router.push({path: '/exam', query: {
      //             courseId: courseId,
      //             examType: '1'
      //         }});
      //     } else {
      //         Toast('很抱歉，您暂时不能进行考试');
      //     }
      // }).catch((resp) => {
      //     Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
      //     this.buttonEnabled.test = true;
      // });
    },


    getCourseInfo () {
      const courseId = this.courseId;

      if (!courseId) {
        return;
      }

      examApi.getCourseInfo({
        params: {
          courseid: courseId
        }
      }).then((resp) => {
        const result = resp[Const.RESP_RESULT];
        this.info = result || {};
        if (this.info.totalprogress == null) {
          this.info.totalprogress = 0;
        }

        if (this.info.totalprogress > 100) {
          this.info.totalprogress = 100
        }

        this.progress = this.info.totalprogress - 0;
        this.refreshProgress()
        // if (this.info.begintime) {
        //     this.info.begintime = this.info.begintime.substring(0, 10);
        // }

      }).catch((resp) => {
        // Toast(resp[Const.RESP_MESSAGE] || '获取课程信息失败');
        if (resp.statusCode == '200') {
          Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
        }
      });
    },

    getExamInfo () {
      const courseId = this.courseId;

      if (!courseId) {
        return;
      }

      examApi.getExamInfo({
        params: {
          courseid: courseId
        }
      }).then((resp) => {
        const result = resp[Const.RESP_RESULT];
        this.examInfo = result || {};
        if (this.examInfo.content == null) {
          this.examInfo.content = '暂无';
        }
      }).catch((resp) => {
        // Toast(resp[Const.RESP_MESSAGE] || '获取课程信息失败');
        if (resp.statusCode == '200') {
          Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
        }
      });
    },

    toggleCollapse ($event) {
      // let target = $event.target;
      // if (target.className && target.className.indexOf('clamp-text') != -1) {
      //     target.className = target.className.replace('clamp-text', '').trim()
      // } else if (target.className) {
      //     target.className += ' clamp-text'
      // } else if (!target.className) {
      //     target.className = ' clamp-text'
      // }
    },

    handleDisplay (source, index) {
      source[index] = !source[index]
    }
  }
}
</script>

<style lang="scss" scoped>
$scale: 1.2;
$title-font-size: 15px;
$content-line-height: 18px;

.info-container {
  margin-top: 55px;
  padding-left: 16px;
  padding-right: 16px;
}
.button-group {
  .mint-button {
    width: 100%;
    margin-bottom: 24px;
  }
}

.my-class {
  .class-title {
    height: 32px;
    line-height: 30px;
    font-size: $title-font-size * $scale;
    text-align: center;
  }

  .class-cover {
    min-height: 144px;
    max-height: 250px;
    margin-bottom: 18px;
    border-radius: 10px;
    overflow: hidden;

    img {
      width: 100%;
      max-height: 100%;
    }
  }

  .desc-title {
    font-size: $title-font-size * $scale;
  }

  .desc-content {
    line-height: $content-line-height;
    font-size: 12px * $scale;
    margin: 10px 0;

    // .clamp-text {
    //     // overflow: hidden;
    //     // -webkit-line-clamp: 3;
    //     // text-overflow: ellipsis;
    //     // display: -webkit-box;
    //     // -webkit-box-orient: vertical;
    //     width: 100%;
    //     padding: 5px;

    // }
  }

  .class-remark {
    font-size: 12px * $scale;
  }
}

.progress {
  margin: 28px 0 20px 0;
  .remark {
    padding-top: 10px;
    font-size: 12px * $scale;
  }
}

.notice {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .title {
    font-size: $title-font-size * $scale;
  }
  .content {
    padding: 16px 0;
    line-height: $content-line-height;
    font-size: 12px * $scale;
  }
}
</style>
